<template>
  <div class="container">
    <topTitle
      :titleText="titleText"
      :back="back"
      @gobackTriser="goBack"
    ></topTitle>
    <detailHeader :status="status" :infoList="infoList" />
    <div class="mainCon">
      <table cellspacing="0" cellpadding="0" class="detailTable">
        <tbody>
          <tr>
            <td class="title">项目名称</td>
            <td class="content">{{ enterpriseInfo.projectName || '--' }}</td>
            <td class="title">项目状态变更申请</td>
            <td class="content">{{ enterpriseInfo.oldToNewStatus || '--' }}</td>
          </tr>
          <tr>
            <td class="title">申请用户</td>
            <td class="content">{{ enterpriseInfo.applyUserName || '--' }}</td>
            <td class="title">申请日期</td>
            <td class="content">{{ enterpriseInfo.applyTime || '--' }}</td>
          </tr>

          <tr>
            <td class="title">变更原因说明</td>
            <td colspan="3">{{ enterpriseInfo.reason || '--' }}</td>
          </tr>
          <tr>
            <td class="title">附件</td>
            <td colspan="3" v-if="enterpriseInfo.files.length > 0">
              <template v-for="(item, index) in enterpriseInfo.files">
                <div class="interval" :key="index">
                  <a
                    target="_blank"
                    class="aLink mouseOn"
                    :href="item.absolutePath"
                    >{{ item.originalName || '--' }}</a
                  >
                </div>
              </template>
            </td>
            <td colspan="3" v-else>--</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
<script>
import detailHeader from '@/components/publicCom/detailHeader.vue'
export default {
  name: 'projectStatusCheckDetail',
  data() {
    return {
      titleText: '项目状态变更申请详情',
      back: true,
      enterpriseInfo: {
        files: [],
      },
      status: '',
      infoList: [],
      id: '', //列表传过来的主键id
    }
  },
  components: { detailHeader },
  mounted() {
    this.id = this.$route.query.id
    this.getDetail(this.id)
  },
  methods: {
    getDetail(id) {
      this.axios
        .post('api-p/projectStatusCheck/expand/detail', { id })
        .then((response) => {
          this.enterpriseInfo = response.data.result
          console.log(this.enterpriseInfo.checkStatus)
          if (this.enterpriseInfo.checkStatus == 'REJECTED') {
            this.status = 3
            this.infoList = [
              { title: ' 审核人', value: this.enterpriseInfo.checkUserName },
              { title: ' 审核时间', value: this.enterpriseInfo.checkTime },
              { title: ' 驳回原因', value: this.enterpriseInfo.rejectReason },
            ]
          } else if (this.enterpriseInfo.checkStatus == 'PASSED') {
            this.status = 2
            this.infoList = [
              { title: ' 审核人', value: this.enterpriseInfo.checkUserName },
              { title: ' 审核时间', value: this.enterpriseInfo.checkTime },
            ]
          } else {
            this.status = 1
          }
        })
        .catch((error) => {
          this.$message.error('数据获取失败')
        })
    },
    goBack() {
      this.$router.push({
        path: '/home/project/projectChangeRecord',
        query: { activeName: 'second' },
      })
      this.$store.commit('GOBACK_NAME', {
        oldUrl: '/home/project/projectChangeRecord',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
  },
}
</script>
<style scoped lang="less">
.container {
  .mainCon {
    top: 198px;
    color: #333;
    font-size: 14px;
    padding: 24px;
    table {
      .general {
        color: #6dd400;
      }
      .serious {
        color: #e02020;
      }
      .aLink {
        color: #00a0e9;
      }
    }
  }
}
</style>
